<template>
	<jk-dialog
		v-model="showDialog"
		title="完成维修"
		width="960px"
		:show-content-loading="showLoading"
		:confirm-btn-loading="confirmBtnLoading"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-confirm="onConfirmBtn"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" :show-message="false">
			<el-row>
				<el-col :span="8">
					<el-form-item class="margin-bottom-0" label="设备">
						<span class="read-only-2">{{ ruleForm.machineCode }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-0" label="所属工序">
						<span class="read-only-2">{{ ruleForm.processName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-0" label="所属区域">
						<span class="read-only-2">{{ ruleForm.workshopName }}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider><i class="el-icon-phone"></i>报修信息</el-divider>
			<el-row>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="报修时间" prop="faultTime">
						<span class="read-only-2">{{ ruleForm.faultTime }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="故障等级" prop="faultLevelId">
						<span class="read-only-2">{{ ruleForm.faultLevelName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="故障分类">
						<span class="read-only-2">{{ ruleForm.faultTypeName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="故障项目">
						<span class="read-only-2">{{ ruleForm.faultName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item class="margin-bottom-10" label="故障现象">
						<span class="read-only-2">{{ ruleForm.faultDescription }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-0" label="指定维修人">
						<span class="read-only-2">{{ ruleForm.repairmanName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-0" label="复机时间">
						<span class="read-only-2">{{ ruleForm.restartTime }}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider><i class="el-icon-s-order"></i>维修信息</el-divider>
			<el-row>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="开始时间" prop="beginTime">
						<jk-date-picker v-model="ruleForm.beginTime" type="datetime" size="medium" placeholder="开始时间" @change="onCalHour($event, 'beginTime')" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="完成时间" prop="endTime">
						<jk-date-picker v-model="ruleForm.endTime" type="datetime" size="medium" placeholder="完成时间" @change="onCalHour($event, 'endTime')" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="维修耗时">
						<span class="read-only-2">{{ ruleForm.repairTimeConsuming || 0 }} (小时)</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="故障分类">
						<el-select v-model="ruleForm.actualFaultTypeId" placeholder="故障分类" class="width-100-percent" clearable @change="onFaultTypeChange">
							<el-option v-for="item in faultTypeList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="故障项目">
						<jk-select v-model="ruleForm.actualFaultId" size="medium" :option-list="faultItemList" placeholder="故障项目" class="width-100-percent" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="故障原因">
						<jk-select v-model="ruleForm.actualFaultCauseId" size="medium" :option-list="faultCauseList" placeholder="故障原因" class="width-100-percent" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="维修人">
						<span class="read-only-2">{{ ruleForm.actualRepairmanName }}</span>
						<!--<remote-search-emp-input
							placeholder="维修人"
							only-key="actualRepairmanId"
							query-name="actualRepairmanName"
							:form-data="ruleForm"
							@on-select="onSelectEmpChange"
						></remote-search-emp-input>-->
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="margin-bottom-0" label="维修内容">
						<el-input v-model="ruleForm.actualRepairDescription" type="textarea" :row="2" placeholder="维修内容" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import {
        spinFaultCauseCreate, spinFaultCausePage,
        spinFaultCauseUpdate
    } from '../../../../api/machine/faultCause';
    import {
        spinFaultTypePage
    } from '../../../../api/machine/faultCategory';
    import { machineManagerRepairOrderComplete, machineManagerRepairOrderGet } from '../../../../api/machine/repairOrder';
    import { spinFaultItemPage } from '../../../../api/machine/faultItem';
    import remoteSearchEmpInput from '../../../production/order/components/remote-search-emp-input';
    import { getDiffHours, tipsBar } from '../../../../utils/jk/jk-tool';
    export default {
        components: {
            remoteSearchEmpInput
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        mixins: [calHeight],
        data() {
            return {
                faultCauseList: [],
                faultItemList: [],
                faultTypeList: [],
                showDialog: false,
                showLoading: true,
                confirmBtnLoading: false,
                ruleForm: {
                    'beginTime': '',
                    'callId': null,
                    'callName': '',
                    'callTime': '',
                    'endTime': '',
                    'faultCauseCode': '',
                    'faultCauseId': null,
                    'faultCauseName': '',
                    'faultCode': '',
                    'faultDescription': '',
                    'faultId': null,
                    'faultLevelId': null,
                    'faultLevelName': '',
                    'faultName': '',
                    'faultTypeCode': '',
                    'faultTypeId': null,
                    'faultTypeName': '',
                    'ifReplace': true,
                    'ifShutdown': true,
                    'machineCode': '',
                    'machineId': null,
                    'machineName': '',
                    'processCode': '',
                    'processId': null,
                    'processName': '',
                    'repairDescription': '',
                    'repairmanId': null,
                    'repairmanName': '',
                    'repairmanTime': '',
                    'restartTime': '',
                    'workshopCode': '',
                    'workshopId': null,
                    'workshopName': '',
                    'faultTime': '',
                    // 完成维修的信息
                    'actualFaultCauseCode': '',
                    'actualFaultCauseId': null,
                    'actualFaultCauseName': '',
                    'actualFaultCode': '',
                    'actualFaultDescription': '',
                    'actualFaultId': null,
                    'actualFaultName': '',
                    'actualFaultTypeCode': '',
                    'actualFaultTypeId': null,
                    'actualFaultTypeName': '',
                    'actualRepairDescription': '',
                    'actualRepairmanId': null,
                    'actualRepairmanName': '',
                    'id': null,
                    'repairTimeConsuming': null
                },
                rules: {
                    beginTime: [{ required: true, trigger: 'change' }],
                    endTime: [{ required: true, trigger: 'change' }],
                    name: [{ required: true, trigger: 'change' }]
                }
            };
        },
        methods: {
            onCalHour(e, type) {
                if (this.ruleForm.endTime && this.ruleForm.beginTime) {
                    if (this.ruleForm.endTime > this.ruleForm.beginTime) {
                        this.$set(this.ruleForm, 'repairTimeConsuming', getDiffHours(this.ruleForm.beginTime, this.ruleForm.endTime));
                    } else {
                        this.$set(this.ruleForm, type, null);
                        tipsBar(this, 'custom', 'warning', '开始时间不能大于结束时间!');
                    }
                } else {
                    this.$set(this.ruleForm, 'repairTimeConsuming', null);
                }
            },
            onSelectEmpChange(e) {
                if (Object.keys(e).length) {
                    this.$set(this.ruleForm, 'actualRepairmanId', e.id);
                    this.$set(this.ruleForm, 'actualRepairmanName', e.name);
                }
            },
            onFaultTypeChange() {
                this.$set(this.ruleForm, 'actualFaultId', null);
                this.$set(this.ruleForm, 'actualFaultCode', null);
                this.$set(this.ruleForm, 'actualFaultName', null);
                this.getFaultItemListRequest();
            },
            getFaultItemListRequest() {
                if (this.ruleForm.faultTypeId) {
                    return spinFaultItemPage({
                        auditState: 1,
                        faultTypeId: this.ruleForm.faultTypeId
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.faultItemList = res.data.res || [];
                        }
                    });
                }
            },
            getParamData() {
                const params = JSON.parse(JSON.stringify(this.ruleForm));
                params.actualFaultTypeCode = this.faultTypeList.find(x => x.id === params.actualFaultTypeId).code;
                params.actualFaultTypeName = this.faultTypeList.find(x => x.id === params.actualFaultTypeId).name;

                const faultCauseItem = this.faultCauseList.find(x => x.id === params.actualFaultCauseId) || {};
                params.actualFaultCauseCode = faultCauseItem.code;
                params.actualFaultCauseName = faultCauseItem.name;

                const faultItem = this.faultItemList.find(x => x.id === params.actualFaultId) || {};
                params.actualFaultCode = faultItem.code;
                params.actualFaultName = faultItem.name;
                return params;
            },
            createAndUpdateRequest() {
                this.confirmBtnLoading = true;
                machineManagerRepairOrderComplete(this.getParamData()).then(res => {
                    this.confirmBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-finish');
                    }
                });
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.createAndUpdateRequest();
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getDetailRequest() {
                return machineManagerRepairOrderGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                        // 开始时间默认等于接单的时间
                        this.$set(this.ruleForm, 'beginTime', res.data.res.repairmanTime);
                        this.$nextTick(() => {
                            this.$refs.ruleForm.clearValidate();
                        });
                    }
                });
            },
            getFaultCategoryListRequest() {
                return spinFaultTypePage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        this.faultTypeList = res.data.res;
                    }
                });
            },
            getFaultCauseListRequest() {
                return spinFaultCausePage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        this.faultCauseList = res.data.res;
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                await this.getFaultCategoryListRequest();
                await this.getFaultCauseListRequest();
                if (this.dataId) await this.getDetailRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
